<template>
 <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/studentPage/stuSignup' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>查看准考证</el-breadcrumb-item>
    </el-breadcrumb>
  <div>
  <div id="pdf_content">
   <div class="card_head">
     <strong><span class="card_head_title_1">{{cardTitle}}</span></strong>
     <br>
     <span class="card_head_title_2">准考证</span>
   </div>
   <div class="card_stuinfo">
    <span class="card_title">考生信息</span>
    <div class="card_stuinfo_message">
      <span class="stu_span">准考证号：{{stuData.sCertNo}}</span>
      <span class="stu_span">姓名：{{stuData.sName}}</span>
      <span class="stu_span">性别：{{stuData.sSex}}</span>
      <span class="stu_span">证件类型：{{stuData.sCardType}}</span>
      <span class="stu_span">证件号码：{{stuData.sCardNo}}</span>
      <span class="stu_span">所属学校：{{stuData.sSchool}}</span>
      <span class="stu_span">院系班级：{{stuData.collClass}}</span>
      <span class="stu_span">学号：{{stuData.sStudentNo}}</span>
    </div>
    <div class="stu_picture">
      <img class="stu_img" :src="stuData.sPic">
    </div>
   </div>
   <div class="card_timeplan">
   <span class="card_title">时间安排</span>
    <div class="div_time_span">
     <span class="time_span_1">考试</span><span class="time_span_1">场次</span><span class="time_span_1">考试日期</span><span    class="time_span_1">报到时间</span><span class="time_span_1">考试时间</span>
    </div>
    <div v-for="item in subjectList" :key="item.subId">
     <span class="time_span_2">{{item.subjectName}}</span><span class="time_span_2">--</span><span class="time_span_2">{{item.sDate}}</span><span class="time_span_2">{{item.aheadTime}}</span><span class="time_span_2">{{item.examEndAndStart}}</span>
    </div>
   </div>
   <div class="card_examplan">
   <span class="card_title">考试安排</span>
     <div class="div_exam_span">
     <span class="exam_span_1">考试</span><span class="exam_span_long_1">考试地点</span><span class="exam_span_long_1">考场号</span><span  class="exam_span_1">座位号</span>
     </div>
     <span class="exam_span_2">{{stuData.eName}}</span><span class="exam_span_long_2">{{stuData.rLocName}}</span><span class="exam_span_long_2">{{stuData.erNo}}</span><span  class="exam_span_long_2">{{stuData.sRoomNo}}</span>
   </div>
   <div class="card_exammust">
   <span class="card_title">考试须知</span>
    <div v-for="(item,index) in messageManage" :key= "index">
     <p>{{index+1}}{{item}}</p>
    </div>
   </div>
  </div>
  </div>
   <el-button type="danger" @click="goDownload" class="but_pdf">导出PDF</el-button>
  </div>
</template>>

<script>
import { info } from '@/api/userOpe'

export default {
  data () {
    return {
      // 从sessionStorage获取个人信息请求参数
      stuInfo: {
        eno: window.sessionStorage.getItem('eno'),
        sCardNo: window.sessionStorage.getItem('sCardNo')
      },
      // 学生准考证信息
      stuData: {
        sCertNo: '',
        sName: '',
        sSex: '',
        sCardType: '',
        sCardNo: '',
        sSchool: '',
        collClass: '',
        sStudentNo: '',
        sPic: '',
        sNote: '无',
        sCourse: '',
        sRoomNo: '',
        eName: '',
        rLocName: '',
        erNo: ''
      },
      // 考试科目
      subjectList: [],

      // 考试需知字符串
      message: '',
      // 考试需知字符串处理后的数组
      messageManage: [],
      cardTitle: '',
      htmlTitle: '' // '考生' + this.stuData.sName + '的准考证' （无效，亲测）
    }
  },
  mounted () {
    // 实例创建完毕执行请求
    this.getStuData()
    // this.htmlTitle = '考生' + this.stuData.sName + '的准考证' （无效，亲测）
  },
  beforeUpdate () {
    // beforeUpdate钩子 :  beforeUpdate 是发生在虚拟 Dom 重新渲染及打补丁之前，这时虚拟 Dom 已经被更新了,这时候 this.stuData.sName 肯定有值了 ，所以打印姓名应该写在这里
    this.htmlTitle = '考生' + this.stuData.sName + '的准考证'

    // 一开始是 考试时间 ，现在通过函数计算重新赋值
    // console.log(this.eArrange.eRegister)
    this.getAheardTime(this.subjectList)

    // 准考证头部信息
    this.getCardHeadTitle()
  },
  beforeRouteLeave (to, from, next) {
    if (to.path === '/HomeTeachter') {
      next(false)
    } else next()
  },
  methods: {
    goDownload () {
      this.$confirm('请仔细核对您的信息，若无误按确定导出准考证，否则请联系教务处！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.getPdf()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出准考证'
        })
      })
    },
    quitUser () {
      window.sessionStorage.clear()
      this.$router.push({ path: '/Login' })
    },
    getStuData () {
      // console.log(this.stuInfo)
      info(this.stuInfo).then(res => {
        // console.log(res.data)
        // console.log(res.data.student) // 考生信息
        const stuCard = res.data.student
        this.stuData.sCertNo = stuCard.sCertNo
        this.stuData.sName = stuCard.sName
        this.stuData.sSex = stuCard.sSex === 1 ? '男' : '女'
        this.stuData.sCardType = stuCard.sCardType
        this.stuData.sCardNo = stuCard.sCardNo
        this.stuData.sSchool = stuCard.sSchool
        this.stuData.collClass = stuCard.sCollege + stuCard.sClass
        this.stuData.sStudentNo = stuCard.sStudentNo
        this.stuData.sPic = stuCard.sPic
        this.stuData.erid = stuCard.erid
        this.stuData.sRoomNo = stuCard.sRoomNo
        this.stuData.eName = res.data.examInfo.eName
        this.stuData.rLocName = res.data.roomInfo.rLocName + '' + res.data.roomInfo.rName
        this.stuData.erNo = res.data.examRoomInfo.erNo
        this.message = res.data.cardNote.cValue
        // console.log(this.message)
        this.strManage(this.message)
        // console.log(res.data.student.subjectList)
        this.subjectList = stuCard.subjectList
        // console.log(this.stuData)
        // console.log(this.subjectList)
      })
    },
    strManage (val) {
      val = val.replace(/[0-9]/ig, '&')
      this.messageManage = val.split('&') // 小问题： 数组第一个元素要删除
      this.messageManage = this.messageManage.slice(1) // 问题解决
      // console.log(val)
      // console.log(this.messageManage)
    },
    getAheardTime (etime) {
      // 获得报到时间思路：获得考试时间到1970的时间戳，再减去15 x 60 秒 ，最后转回 hh:mm:ss 格式即可
      // console.log(etime.length)
      for (let i = 0; i < etime.length; i++) {
        if (etime[i] !== null) {
          // hh:mm -> 时分时间戳
          let sumsec = ''
          const hour = etime[i].sStartTime.split(':')[0]
          const min = etime[i].sStartTime.split(':')[1]
          sumsec = Number(hour * 3600) + Number(min * 60) - (15 * 60)
          // 时分时间戳 -> hh:mm
          const time = Number(sumsec)
          const h = Math.floor(time / 3600)
          const m = Math.floor((time % 3600) / 60)
          const hh = h < 10 ? '0' + h : h
          const mm = m < 10 ? '0' + m : m
          etime[i].aheadTime = hh + ':' + mm // 不一定要声明 aheadtime ，会隐式增加
        }
        // console.log(etime[i])
      }
    },
    getCardHeadTitle () {
      // 准考证头条信息处理
      // console.log(this.subjectList)
      const time = this.subjectList[0].sDate.split('-')[0]
      const yearState = this.subjectList[0].sDate.split('-')[1] < 6 ? '上半年' : '下半年'
      const exam = this.stuData.eName
      this.cardTitle = time + '年' + yearState + '(' + this.subjectList[0].sDate.split('-')[1] + ')' + exam
    }
  },
  watch: {
    subjectList: function (list) {
      for (let i = 0; i < list.length; i++) {
        list[i].examEndAndStart = list[i].sStartTime.slice(0, 5) + '-' + list[i].sEndTime.slice(0, 5) // 开始结束时间处理， 隐式增加
      }
      // console.log(list)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/varibles.styl'
.el-row
    margin-bottom: 20px
    margin-left : -7px
    &:last-child
      margin-bottom: 0
  .el-col-24
   width : 100.3%
  .el-col
    border-radius: 0px
  .bg-purple-dark
    background: #e2e7ec
  .bg-purple
    background: #d3dce6
  .bg-purple-light
    background: #e5e9f2
  .grid-content
    border-radius: 0px
    min-height: 50px
    margin-top : -7.6px
    width : 100%
    .but_quit
     position :absolute
     left  : 100px
     margin-top : 5px
    .stu_pic
      position :absolute
      width : 50px
      height : 50px
      border-radius : 50%
  .row-bg
    padding: 10px 0;
    background-color: #f9fafc00
.card_title
    display : $cardDisplay
    margin-top : -1px
    border-bottom : $cardBorder
    font-weight : $fontWeight
 br
  margin-top : 1vh
 p
  margin : 1vh
  font-size : $valueFont
 span
  display : inline-block
#pdf_content
  position relative
  margin : 1vh auto auto auto
  width : 30vw
  height : 82.3vh
  border : $cardBorder
  font-family: monospace
  font-size:1.2vh
  background: #fff
  .card_head
   position: relative
   width: 20vw
   padding-top: 10px
   display: flex
   margin : -0.1vh auto auto auto
   height : 8%
   justify-content center
   .card_head_title_1
    display: $cardDisplay
    font-size: 0.8vw
    margin auto
   .card_head_title_2
    position absolute
    width : 4vw
    margin-top 4vh
    display : $cardDisplay
    font-size: $headTitleFont
    font-weight : $fontWeight
  .card_stuinfo
   position relative
   margin : $cardMargin
   width : 92%
   height : 22%
   border : $cardBorder
  .card_stuinfo_message
   margin-left : 1vw
   margin-top : 0.5vh
   .stu_span
    width : 100%
    padding-top : 0.5vh
@-moz-document url-prefix() {
    .card_tuinfo_message {
      position: relative
      top: -7px
    }
  }
@-moz-document url-prefix() {
    .stu_span {
      padding-top : 0
    }
  }
  .stu_picture
   position absolute
   left 0
   top: 0
   width :  5vw
   height : 12vh
   margin: 5% 0 0 80%
 @-moz-document url-prefix() {
    .stu_picture {
      top: -10px
      margin-left : 80%
      width :  5vw
      height : 12vh
    }
  }
   .stu_img
    width : 100%
    height : 100%
  .card_timeplan
   margin : $cardMargin
   width : 92%
   height : 20%
   border : $cardBorder
   .div_time_span
    margin : auto
    width : 90%
    margin-top : 5px
    border-bottom : $cardBorder
  .time_span_1
    font-size : 1.1vh
    margin-left :2.5vw
  .time_span_2
    font-size : 1.1vh
    margin-left : 2.5vw
  .card_examplan
   margin : $cardMargin
   width : 92%
   height : 7%
   border : $cardBorder
   .div_exam_span
    margin : auto
    width : 90%
    margin-top : 5px
    border-bottom : $cardBorder
   .exam_span_1
    font-size : 11px
    margin-left :40px
   .exam_span_long_1
    font-size : 11px
    margin-left : 100px
   .exam_span_2
    font-size : 11px
    margin-left :45px
   .exam_span_long_2
    font-size : 11px
    margin-left : 65px
  .card_exammust
   margin : $cardMargin
   width : 92%
   height : 30%
   border : $cardBorder
.but_pdf
  display : block
  width : 10vw
  height : 40px
  margin : 1vh auto auto auto
</style>
